<template>
  <div id="renderpart-box">
    <section class="featured-articles"  ref="text_box">
      <h2 >{{ title }}</h2>
      <div class="article-grid">
        <article
          v-for="article in displayedArticles"
          :key="article.id"
          class="article-card"
          @click="handle_renderdetails_click(article.id,props.issift)"
        >
          <h3><span>{{ article.title }}</span></h3>
          <div v-if="article.index_image!='null'" class="article-img-sketch">
            <img  :src="article.index_image" />
            <div>{{ article.sketch }}</div>
          </div>
         
          <div class="article-meta" >
            <span>{{ article.date }}</span>
            <div>
              <span><Icon type="ios-contact-outline" /> {{ article.username }}</span>
              <span><Icon type="md-book" /> {{ article.reads }}</span>
              <span><Icon type="md-thumbs-up" style="color: #5cadff;" /> {{ article.thumbs }}</span>
              <span><Icon type="ios-bookmark" style="color: #ff9900;" /> {{ article.collects }}</span>
              <span>{{ article.kind }}</span>
            </div>
          </div>
          <span
            class="read-more"
            :issift="props.issift"
            :id="article.id"
            
            >阅读更多 →</span
          >
        </article>
      </div>
    </section>
    <div class="browse_loader_sifttext" ref="loaderElement"></div>
  </div>
</template>

<script setup>
import { success } from '@/static/js/alert';
import { ref, nextTick, defineProps, defineEmits, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps({
  featuredArticles: {
    type: Array,
    required: true,
    default: () => [{
      id: 1,
      title: '文章标题1',
      sketch: '这里是文章的简短描述，吸引读者点击阅读全文。',
      index_image: 'https://via.placeholder.com/300',
      date: '2023-01-01',
      author: '作者名字',
      reads: 0,
      comments: "",
      thumbs: 0,
      collects: 0,
      resource: "1",
      tips: [1],
      kind: "2"
    }]
  },
  title: {
    type: String,
    required: true,
    default: '精选文章'
  },
  tag: {
    type: String,
    required: true,
    default: 'sift'
  },
  issift: {
    type: Number,
    required: true,
    default: 0
  },
  maxcount: {
    type: Number,
    required: false,
  },
  mynav: {
    type: String,
    required: false,
    default: () => { 
      return '<span style="color: #667eea;">已经到底了!</span>';
    }
  }
});
watch(() => props.featuredArticles, (newA,oldA) => {
  if (newA.length===oldA.length || newA==undefined || newA==0) {
    success("已经到底了!")
    // 实际上这个为了处理更多的效果专栏,暂不修改
  //  loaderElement.value.innerHTML =props.mynav;
  }
})
const emit = defineEmits(['load-more', 'render-details']);
const text_box = ref(null);
const loaderElement = ref(null);
const isLoading = ref(false);
const displayedArticles = ref([]);
const router=useRouter()

const initializeArticles = () => {
  displayedArticles.value =props.featuredArticles.slice(0, props.maxcount);
  // console.log(displayedArticles.value)
};


watch(() => props.featuredArticles, initializeArticles, { immediate: true });

// 处理点击后渲染具体数据
const handle_renderdetails_click = (id) => {
  const to = router.resolve({ name: "community_render_text", query: { id: id } })
  window.open(to.href, '_blank')
}

const init_brower = () => {
  const target = loaderElement.value; // 使用 ref 直接获取元素
  if (!target) return;
    const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !isLoading.value) {
        isLoading.value = true
        handle_textbox_scroll()
      }
    });
  }, {
    root: null, // 使用视口作为根
    rootMargin: '0px',
    threshold: 0.1
  });
  observer.observe(target)
}


// 处理滚动动态加载数据,采用api
const handle_textbox_scroll = async () => {
   try {
          emit('load-more', props.tag, props.issift); // 通知父组件加载更多数据
          await nextTick();
          // 更新显示的文章
          displayedArticles.value = props.featuredArticles.slice(0, props.maxcount);
    } finally {
          isLoading.value = false;
    }   
};

onMounted(async() => {
  await nextTick()
  init_brower()
});
</script>

<style scoped>
/* 右侧：精选文章 */
.featured-articles {
  width: 100%;
  flex: 1;
  overflow: scroll;
  height: calc(100vh - 80px - 45px);
}

.featured-articles::-webkit-scrollbar {
  display: none;
}

.featured-articles h2 {
  text-align: center;
  font-size: 2em;
  color: #444;
}

/* 文章卡片 */
/* 文章布局 */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* 添加媒体查询 */
@media (max-width: 768px) {
  .article-grid {
    grid-template-columns: 1fr; /* 小屏幕时只显示一列 */
  }

  /* 同时调整文章预览区域的布局 */
  .article-img-sketch {
    width: 100%; /* 占满整个宽度 */
    flex-direction: column; /* 改为垂直布局 */
  }

  .article-img-sketch > img {
    width: 100%; /* 图片占满宽度 */
    height: auto; /* 高度自适应 */
    margin-bottom: 10px; /* 添加间距 */
  }
  .article-card{
    width: 100vw;
  }
  .featured-articles>h2{
    width: 100vw;
  }
}

.article-card {
  background: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.article-card img {
  width: 100%;
  border-radius: 8px;
}

.article-card h3 {
  margin: 15px 0 10px;
  font-size: 1.4em;
  color: #444;
}

.article-card p {
  margin: 0 0 15px;
  color: #666;
}

.article-card .read-more {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.article-card .read-more:hover {
  color: #764ba2;
}

/* 文章预览信息 */
.article-img-sketch {
  width: 100%;
  display: flex; /* 使用flex布局 */
  gap: 10px; /* 替代margin-right */
  flex-direction: column; /* 改为垂直布局 */
}

.article-img-sketch > img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.article-img-sketch > div {
  flex: 1; /* 自动填充剩余空间 */
  /* 保持其他文字相关样式不变 */
  overflow: hidden;  
  text-overflow: ellipsis;
  display: -webkit-box;  
  -webkit-line-clamp: 5;  
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* 文章元信息 */
div.article-meta {
  align-items: center;    
  gap: 16px;              
  flex-wrap: wrap;      
}

.article-meta > span:nth-child(1) {
  font-weight: bold;
  width: 150px;
}

div.article-meta > div {
  display: flex;        
  align-items: center;    
  gap: 16px;              
  flex-wrap: wrap;    
  display: block;
}

div.article-meta > div > span {
  padding-left: 8px;
}

.article-meta > div > span:nth-child(1) {
  width: 150px;
  padding-left: 0px;;
}

/* 这是浏览标记 */
.browse_loader_sifttext{
  width: 100%;
  height: 25px;
  text-align: center;
  font-size: 18px;
  color: #1a73e8;
  margin-top: 0; /* 确保不会影响布局 */
  visibility: visible; /* 确保元素可见 */
  margin-bottom: 20px;
}
</style>